import React, { PureComponent } from 'react';
import { Card, message, Button, Spin, Divider } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import queryString from 'query-string';

const { Description } = DescriptionList;
@connect(({ businessscope }) => ({
  businessscope,
}))
class busiScopeDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      suppId: '',
      name: '',
      suppList: [],
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { suppId, name } = this.state;
    const suppIdNew = queryString.parse(location.search).suppId ? queryString.parse(location.search).suppId : suppId;
    const nameNew = queryString.parse(location.search).name ? queryString.parse(location.search).name
      : name;
    this.getProducts(suppIdNew, nameNew);
  }

  // 获取产品详情
  getProducts = (suppId, name) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/fetchInfor',
      payload: { suppId, name },
    }).then(res => {
      this.setState({ loading: false, suppId, name });
      if (res.success && res.data) {
        this.setState({ suppList: res.data.suppBusiScopeList, name: res.data.name });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
  };

  render() {
    const { loading, suppList, name } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin tip="loading..." spinning={loading}>
          <Card title={<span>业务范围信息详情</span>}>
            {suppList.map(item => (
              <div key={item.busiScopeId}>
                <DescriptionList>
                  <Description term="供应商名称">{name || '--'}</Description>
                  <Description term="地区">{item.areaInfo.areaName || '--'}</Description>
                  <Description term="服务产品">
                    {item.prodList.map((itm, i) => (
                      <span>
                        {(itm && itm.pdName) || '--'}
                        {i < item.prodList.length - 1 ? '，' : null}
                      </span>
                    ))}
                  </Description>
                  {item.pensAddDeadline ? (
                    <div />
                  ) : (
                    <Description term="社保增员截止日">{item.insAddDeadline || '--'}</Description>
                  )}
                  {item.pensAddDeadline ? (
                    <div />
                  ) : (
                    <Description term="社保减员截止日">{item.insDelDeadline || '--'}</Description>
                  )}

                  {item.pensAddDeadline ? (
                    <Description term="养老增员截止日">{item.pensAddDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}
                  {item.pensDelDeadline ? (
                    <Description term="养老减员截止日">{item.pensDelDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}

                  {item.unempAddDeadline ? (
                    <Description term="失业增员截止日">{item.unempAddDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}
                  {item.unempDelDeadline ? (
                    <Description term="失业减员截止日">{item.unempDelDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}

                  {item.injAddDeadline ? (
                    <Description term="工伤增员截止日">{item.injAddDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}
                  {item.injDelDeadline ? (
                    <Description term="工伤减员截止日">{item.injDelDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}

                  {item.birthAddDeadline ? (
                    <Description term="生育增员截止日">{item.birthAddDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}
                  {item.birthDelDeadline ? (
                    <Description term="生育减员截止日">{item.birthDelDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}

                  {item.medAddDeadline ? (
                    <Description term="医疗增员截止日">{item.medAddDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}
                  {item.medDelDeadline ? (
                    <Description term="医疗减员截止日">{item.medDelDeadline || '--'}</Description>
                  ) : (
                    <div />
                  )}

                  {item.insLsPkgList ? (
                    <Description term="社保组合">
                      {item.insLsPkgList.map((itm, i) => (
                        <span>
                          {itm.insLsPkgName || '--'}{' '}
                          {i < item.insLsPkgList.length - 1 ? '，' : null}
                        </span>
                      ))}
                    </Description>
                  ) : (
                    <div />
                  )}
                  {item.accuAddDeadline ? (
                    <Description term="公积金增员截止日">
                      {item.accuAddDeadline || '--'}
                    </Description>
                  ) : (
                    <div />
                  )}
                  {item.accuDelDeadline ? (
                    <Description term="公积金减员截止日">
                      {item.accuDelDeadline || '--'}
                    </Description>
                  ) : (
                    <div />
                  )}
                  {item.accuLsPkgList ? (
                    <Description term="公积金组合">
                      {item.accuLsPkgList.map((itm, i) => (
                        <span>
                          {itm.accuLsPkgName || '--'}
                          {i < item.accuLsPkgList.length - 1 ? '，' : null}
                        </span>
                      ))}
                    </Description>
                  ) : (
                    <div />
                  )}
                </DescriptionList>
                {suppList.length > 1 ? <Divider dashed /> : null}
              </div>
            ))}
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default busiScopeDetail;
